<!--
 * @Descripttion: 开放平台-服务商管理
 * @Author: 马义超 yichao@ssc-hn.com
 * @Date: 2024-11-10
 * @LastEditors: 马义超 yichao@ssc-hn.com
 * @LastEditTime: 2024-11-17
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-form :model="searchParam" autocomplete="off">
        <a-row :gutter="24">
          <a-col :span="4">
            <a-form-item label="审核状态">
              <a-select v-model:value="searchParam.disable" placeholder="请选择状态" allowClear>
                <a-select-option :value="0">已创建</a-select-option>
                <a-select-option :value="1">待审批</a-select-option>
                <a-select-option :value="2">使用中</a-select-option>
                <a-select-option :value="3">已禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="账号">
              <a-input v-model:value="searchParam.name" placeholder="请输入名称" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="选择日期">
              <a-range-picker v-model:value="timeRange" show-time format="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-row justify="end">
              <a-button @click="clear()">重置</a-button>
              <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">服务商管理</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'providerType'">
            <span>{{ ServiceProviderType[record.providerType] }}</span>
          </template>
          <template v-if="column.dataIndex === 'approvalStatus'">
            <span>{{ ServiceProviderState[record.approvalStatus] }}</span>
          </template>
          <template v-if="column.dataIndex === 'createdTime'">
            <span>{{ record.createdTime ? formatToDateTime(record.createdTime) : '--' }}</span>
          </template>
          <template v-if="column.dataIndex === 'approveTime'">
            <span>{{ record.approveTime ? formatToDateTime(record.approveTime) : '--' }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <span>
              <a-popconfirm title="确定要通过吗，通过后该账号将使用服务商服务。" ok-text="确认" cancel-text="取消" @confirm="confirmRecord(record)">
                <a v-if="record.approvalStatus === 0">通过</a>
              </a-popconfirm>
              <a-divider type="vertical" v-if="record.approvalStatus === 0" />
              <a v-if="record.approvalStatus === 0" @click="showModal(record)">驳回</a>
              <a-divider type="vertical" v-if="record.approvalStatus === 0" />
              <a @click="showDetail(record)">详情</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="modalData.visible" :title="'驳回确认'" @ok="changeAppState" :ok-button-props="{ disabled: !modalData.approvalDesc }" :confirmLoading="confirmLoading">
      <a-textarea :rows="4" v-model:value="modalData.approvalDesc" placeholder="请输入理由" allow-clear />
    </a-modal>
    <a-modal v-model:visible="detailData.visible" title="服务商详情" :width="860">
      <a-row>
        <a-col :span="20">
          <a-row>
            <a-col :span="12">
              <a-form-item label="企业名称">
                {{ detailData.data?.name }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="统一信用代码">
                {{ detailData.data?.socialUnifiedCode }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="法人姓名">
                {{ detailData.data?.userName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="法人身份证号">
                {{ detailData.data?.idCard }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系人姓名">
                {{ detailData.data?.contactName }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系人手机号">
                {{ detailData.data?.contactPhone }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4">
          <div class="logo-container">
            <div class="apply-title">营业执照</div>
            <a-image :width="90" :src="detailData.data?.attachmentFile" class="apply-logo" />
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="公司地址">
            {{ detailData.data?.companyAddress }}
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="经营范围">
            <span class="secret-container" :title="detailData.data?.scopeOfBusiness">{{ detailData.data?.scopeOfBusiness }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="20">
          <a-row>
            <a-col :span="12">
              <a-form-item label="营业执照有效期">
                {{ detailData.data?.businessLicensePeriod }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="营业执照登记机关">
                {{ detailData.data?.registrationAuthority }}
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="企业类型">
                {{ detailData.data?.companyType }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" />
      </a-row>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import type { Dayjs } from 'dayjs'
  import { onMounted, reactive, ref, watch } from 'vue'

  import { requestGetProviderByPage, requestGetServiceProviderByUuid, requestUpdateServiceProviderState } from '/@/api/manage/openApiServiceProvider'
  import { ServiceProviderState, ServiceProviderType } from '/@/api/manage/openApiServiceProvider/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { formatToDateTime } from '/@/utils/date'
  type RangeValue = [Dayjs, Dayjs]
  const timeRange = ref<RangeValue>()

  /** 搜索条件 */
  const searchParam = reactive<ApplyInfoByPageTypes.IRequest>({
    type: null,
    disable: null,
    name: null,
    startTime: null,
    endTime: null,
  })

  const modalData = reactive({
    visible: false,
    approvalStatus: null,
    uuid: '',
    approvalDesc: null,
  })
  const detailData = reactive<any>({
    visible: false,
    data: null,
  })
  const confirmLoading = ref<boolean>(false)

  watch(
    timeRange,
    (value) => {
      if (value) {
        searchParam.startTime = formatToDateTime(value[0])
        searchParam.endTime = formatToDateTime(value[1])
      } else {
        searchParam.startTime = null
        searchParam.endTime = null
      }
    },
    { immediate: true, deep: true },
  )

  watch(
    modalData,
    (value) => {
      if (!value.visible) {
        modalData.uuid = ''
        modalData.approvalDesc = null
      }
    },
    { immediate: true, deep: true },
  )

  /** 表格列配置 */
  const columns = [
    { title: '申请人账号', dataIndex: 'userAccount' },
    { title: '申请人类型', dataIndex: 'providerType' },
    { title: '状态', dataIndex: 'approvalStatus' },
    { title: '创建时间', dataIndex: 'createdTime' },
    { title: '审核时间', dataIndex: 'approveTime' },
    { title: '操作', dataIndex: 'action' },
  ]

  const changeAppState = async () => {
    confirmLoading.value = true
    const { responseCode } = await requestUpdateServiceProviderState({ ...modalData })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      modalData.uuid = ''
      modalData.approvalDesc = null
      modalData.visible = false
      queryList({ current: 1 })
    }
    confirmLoading.value = false
  }

  const confirmRecord = (data) => {
    modalData.uuid = data.uuid
    modalData.approvalStatus = 1
    changeAppState()
  }

  const showModal = (data) => {
    modalData.uuid = data.uuid
    modalData.approvalStatus = 2
    modalData.visible = true
  }

  const showDetail = async (data) => {
    const { responseCode, responseData } = await requestGetServiceProviderByUuid({ uuid: data.uuid })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      detailData.visible = true
      detailData.data = responseData
    }
  }

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetServiceProviderByPageTypes.IRequest, GetServiceProviderByPageTypes.IResponse[]>(searchParam, requestGetProviderByPage)

  onMounted(() => {
    search()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.type = null
    searchParam.disable = null
    searchParam.name = null
    searchParam.startTime = null
    searchParam.endTime = null
    timeRange.value = undefined
    search()
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })
</script>

<style lang="less" scoped>
  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .apply-title {
      text-align: center;
      padding-bottom: 15px;
    }

    .apply-logo {
      width: 64px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
